<template>
  <div class="cart">
    <!-- 顶部 -->
    <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 商品列表 -->
    <div
      class="goodList"
      v-for="(item,index) in cart"
      :key="index"
    >
      <!-- 商品前面的勾勾 -->
      <van-checkbox
        class="cbx"
        v-model="item.completed"
      ></van-checkbox>
      <!-- 每个商品 -->
      <van-card
        class="gooditem"
        :price="item.price"
        :title="item.title"
        :thumb="item.src"
      >
        <!-- 加加减减 -->
        <template #num>
          <div>
            <van-stepper
              v-model="item.count"
              theme="round"
              button-size="22"
              disable-input
            />
          </div>
        </template>
      </van-card>
    </div>

    <!-- 提交按钮 -->
    <van-submit-bar
      :price="allPrice*100"
      button-text="提交订单"
    >
      <van-checkbox
        v-model="allCheckBox"
        @click="checkBoxAll"
      >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    checkBoxAll() {
      this.$store.commit("cart/CHEKBOX_ALL");
    },
  },
  computed: {
    ...mapState({
      cart: (state) => state.cart.cart,
    }),
    ...mapGetters({
      allPrice: "cart/getAllPrice",
      allCheckBox: "cart/getAllCheckBox",
    }),
  },
};
</script>
<style lang="scss">
.cart {
  padding: 0 10px;
  .img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .goodList {
    display: flex;
    .cbx {
      flex: 0.5;
    }
    .gooditem {
      flex: 3;
    }
  }
}
</style>